﻿@model IFDB.ViewModels.PartialViewModels.Interfaces.ITeamPersonListViewModel

@using (var mainAccordion = Html.JQueryUI().Begin(new Accordion().HeightStyle(HeightStyle.Content).Active(3).Collapsible(true, false)))
{
    foreach(var group in Model.PersonList.GroupBy(p => p.Person.Position))
    {
        using (mainAccordion.BeginPanel(Model.GetPosition(group.Take(1).First().Person.Position)))          
        {
            <table class="TeamPersonList">
                <tr>
                    <th></th>
                    <th style="text-align:center">
                        <img style="height: 20px" src="~/Content/images/played.png" alt="Appearances" title="Appearances" />
                    </th>
                    <th style="text-align:center; vertical-align: middle;">
                        <img style="height: 20px" src="~/Content/images/goal.png" alt="Goals" title="Goals" />
                    </th>
                    <th style="text-align:center; vertical-align: middle;">
                        <img style="height: 20px" src="~/Content/images/yellowcard.png" alt="Yellow cards" title="Yellow cards" />
                    </th>
                    <th style="text-align:center; vertical-align: middle;">
                        <img style="height: 20px" src="~/Content/images/redcard.png" alt="Red cards" title="Red cards" />
                    </th>
                </tr>
                
                @foreach (var item in group)
                {
                    <tr>
            
                        <td class="Person">@Html.ActionLink(item.Person.Forenames + " " + item.Person.Surname, "Index", "Person", new { personId = item.Person.PersonId }, null)</td>
                        <td class="PersonStat">@item.Played</td>
                        <td class="PersonStat">@item.Goals</td>
                        <td class="PersonStat">@item.YellowCards</td>
                        <td class="PersonStat">@item.RedCards</td>
                    </tr>
                }

            </table>
        }
    }
    
      
}

    
